<!-- 这个是请假进行审批管理的页面，属于经理或者部门主管 -->

<template>
    <div>
        <el-divider>
            <h1>请假管理</h1>
        </el-divider>
        <el-table :data="leaveAll" :default-sort="{prop: 'leave_status', order: 'ascending'}">
            <el-table-column label="员工ID" prop="user_id" width="80px"></el-table-column>
            <el-table-column label="名字" prop="user_name" width="100px"></el-table-column>
            <el-table-column label="创建时间" prop="created_time" width="150px"></el-table-column>
            <el-table-column label="请假类型" prop="leave_type"></el-table-column>
            <el-table-column label="请假理由" prop="leave_reason"></el-table-column>
            <el-table-column label="状态" prop="leave_status" sortable :filters="tableFIlters" :filter-method="filterStatus">
                <template v-slot:default="scope">
                    <template v-if="scope.row.leave_status == '1'">
                        <el-tag type="info">等待审批</el-tag>
                    </template>
                    <template v-else-if="scope.row.leave_status == '2'">
                        <el-tag type="success">已通过</el-tag>
                    </template>
                    <template v-else-if="scope.row.leave_status == '3'">
                        <el-tag type="danger">已拒绝</el-tag>
                    </template>
                    <template v-else-if="scope.row.leave_status == '4'">
                        <el-tag type="success">已销假</el-tag>
                    </template>
                    <template v-else-if="scope.row.leave_status == '5'">
                        <el-tag type="danger">已超时</el-tag>
                    </template>
                    <template v-else>
                        <el-tag type="danger">出现错误</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="详细信息" :show-overflow-tooltip="true">
                <template v-slot:default="scope">
                    <el-button type="primary" size="mini" @click="changeIsShowLeaveApplicationDialog(scope.row.leave_id)">打开
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible="isShowLeaveApplicationDialog" :before-close="function(){isShowLeaveApplicationDialog = false}">
            <leave-application :leave-id="chooseLeaveId" user-type="manager" v-on:getLeaveAll="getLeaveAll"></leave-application>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "axios"
    import leaveApplication from "./leaveApplication"

    export default {
        name: "leaveManage",
        props: {},
        data: function() {
            return {
                leaveAll: [{
                    start_time: "",
                    end_time: "",
                    leave_reason: "",
                    leave_type: "事假",
                    leave_id: "001",
                    leave_status: "1",
                    user_id: "u002",
                    user_name: "keven"
                }],
                chooseLeaveId: "",
                isShowLeaveApplicationDialog: false,
                tableFIlters: [{
                        text: '等待审批',
                        value: '1'
                    },
                    {
                        text: '已通过',
                        value: '2'
                    },
                    {
                        text: '已拒绝',
                        value: '3'
                    },
                    {
                        text: '员工已通过',
                        value: '4'
                    },
                    {
                        text: '员工已拒绝',
                        value: '5'
                    },
                ]
            }
        },
        methods: {

            /**
             * @description 获取所有的请假信息，并将其放置在当前实例的Data里
             * @function getLeaveAll
             */
            getLeaveAll: function() {
                // console.log("getleaveAll");
                this.leaveAll.length = 0;
                var _this = this;

                axios.get("http://127.0.0.1:8000/api/leave/all/")
                    .then(function(response) {
                        // console.log(response.data);
                        response.data.data.leave_all.forEach(function(item, index) {
                            let tmp = {}
                            tmp.leave_reason = item.leave_reason;
                            tmp.leave_type = item.leave_type;
                            tmp.leave_id = item.leave_id;
                            tmp.leave_status = item.leave_status;
                            tmp.user_id = item.user_id;
                            tmp.user_name = item.user_name;
                            tmp.created_time = item.created_name;

                            var startTimeArray = item.start_time.split("-");
                            var startTime = new Date();
                            startTime.setFullYear(startTimeArray[0]);
                            startTime.setMonth(startTimeArray[1] - 1);
                            startTime.setDate(startTimeArray[2]);
                            startTime.setHours(startTimeArray[3]);
                            startTime.setMinutes(startTimeArray[4]);
                            startTime.setSeconds(0);

                            var endTimeArray = item.end_time.split("-");
                            var endTime = new Date();
                            endTime.setFullYear(endTimeArray[0]);
                            endTime.setMonth(endTimeArray[1] - 1);
                            endTime.setDate(endTimeArray[2]);
                            endTime.setHours(endTimeArray[3]);
                            endTime.setMinutes(endTimeArray[4]);
                            endTime.setSeconds(0);
                            tmp.time = [startTime, endTime];

                            tmp.created_time = item.created_name;

                            _this.leaveAll.push(tmp);
                        })
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            },

            /**
             * @description 改变是否展示DIalog的状态
             * @param {Object} leaveId
             */
            changeIsShowLeaveApplicationDialog: function(leaveId) {
                this.chooseLeaveId = leaveId;
                this.isShowLeaveApplicationDialog = !this.isShowLeaveApplicationDialog;
            },

            /**
             * @description 过滤使用
             * @param {Object} value
             * @param {Object} row
             * @param {Object} column
             */
            filterStatus: function(value, row, column) {
                return value === row.leave_status;
            },

            /**
             * @description  排序使用
             * @param {Object} a
             * @param {Object} b
             */
            leaveStatusSort: function(a, b) {
                a = Number(a);
                b = Number(b);

                return a < b;
            }
        },
        mounted() {
            this.getLeaveAll();
        },
        components: {
            leaveApplication
        }
    }
</script>

<style>

</style>
